<template>
  <div class="myInfo">
    <navBar title="我的资料" path="/home/my"></navBar>
    <div class="content">
      <myCell
        title="头像"
        :value="userInfo.avatar"
        type="img"
        class="avatar"
        @click.native="goEditInfo('avatar')"
      ></myCell>
      <myCell
        class="mt18"
        title="昵称"
        :value="userInfo.nickname"
        @click.native="goEditInfo('nickname')"
      ></myCell>
      <myCell
        title="性别"
        :value="genderObj[userInfo.gender]"
        @click.native="showGender = true"
      ></myCell>
      <myCell
        title="地区"
        :value="areaData.city_list[userInfo.area]"
        @click.native="showArea = true"
      ></myCell>
      <myCell
        title="个人简介"
        :value="userInfo.intro"
        @click.native="goEditInfo('intro')"
      ></myCell>

      <van-button block class="btn mt18" @click="signOut">
        <span class="color">退出登录</span>
      </van-button>
    </div>
    <van-popup v-model="showGender" position="bottom" @closed="closeEvent">
      <van-picker
        v-if="bol"
        title="性别选择"
        show-toolbar
        :default-index="userInfo.gender"
        :columns="Object.values(genderObj)"
        @confirm="genderConfirm"
        @cancel="showGender = false"
      ></van-picker>
    </van-popup>
    <van-popup v-model="showArea" position="bottom">
      <van-area
        v-if="bol"
        :area-list="areaData"
        title="城市选择"
        :value="userInfo.area"
        :columns-num="2"
        @confirm="areaConfirm"
        @cancel="showArea = true"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import myCell from './myCell'
import area from '@/assets/js/area.js'
import { removeLocal } from '@/utils/local.js'
import { auEdit } from '@/api/my.js'
export default {
  data () {
    return {
      // 性别对象
      genderObj: {
        0: '未知',
        1: '男',
        2: '女'
      },
      areaData: area, // 城市数据
      showGender: false, // 性别弹出框不显示
      showArea: false, // 城市弹框不显示
      bol: true // 静默刷新
    }
  },
  components: {
    myCell
  },
  computed: {
    ...mapState(['userInfo'])
  },
  // 监听实现静默刷新
  watch: {
    showArea (newValue) {
      if (newValue === false) {
        this.bol = false
        this.$nextTick(() => {
          this.bol = true
        })
      }
    }
  },
  methods: {
    // 退出登录
    signOut () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '你确定退出登录吗?'
        })
        .then(() => {
          // 删除token
          removeLocal('token')
          // 将登陆状改为false
          this.$store.commit('setIsLogin', false)
          // 跳转到登录页
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    },
    // 性别确定修改
    async genderConfirm (value, index) {
      //  1.调用接口修改用户信息
      //  2.关闭弹出框
      //  3.提示加载中--->修改成功
      //  4.拿到接口并传参
      //  5.更新vuex中的数据
      this.showGender = false
      // this.$toast.loading({ duration: 0 })
      // const res = await auEdit({ gender: index })
      // this.$toast.success('修改成功')
      // this.$store.dispatch('refreshUserInfo')
      this.auEditInfo({ gender: index })
    },
    // 地址确定修改
    async areaConfirm (value, index) {
      // console.log(value, index)
      this.showArea = false
      this.auEditInfo({ area: value[1].code })
    },
    // 封装修改信息
    async auEditInfo (data) {
      this.$toast.loading({ duration: 0 })
      await auEdit(data)
      this.$toast.success('修改成功')
      this.$store.dispatch('refreshUserInfo')
    },
    // 修改昵称
    goEditInfo (str) {
      this.$router.push('/home/editInfo?type=' + str)
    },
    // 组件选择了但未修改 实现静默刷新
    closeEvent () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.myInfo {
  height: 100%;
  background-color: #f7f4f5;
  .content {
    padding: 18px @p15;
    .mt18 {
      margin-top: 18px;
    }
    .color {
      color: red;
    }
    .btn {
      border-radius: 5px;
    }
  }
}
</style>
